<template>
  <el-tabs v-model="activeName">
    <el-tab-pane label="Basic" name=first>
  <div>
    <el-form ref="form" :model="form" :rules="rules" label-width="150px">
      <el-row>
        <el-col :span="10">
          <el-form-item label="buyer account" prop="buyername">
            <el-input v-model="form.buyername" placeholder="please write buyer account"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="buyer password" prop="buyerpassword">
            <el-input v-model="form.buyerpassword" placeholder="if password is123456/Pass1234/Shopee123,dont need write"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10">
          <el-form-item label="seller account" prop="shopname">
            <el-input v-model="form.shopname" placeholder="please write seller account"></el-input>
          </el-form-item>
        </el-col>
          <el-col :span="10">
            <el-form-item label="seller password" prop="shoppassword">
              <el-input v-model="form.shoppassword" placeholder="if password is123456/Pass1234/Shopee123,dont need write"></el-input>
            </el-form-item>
          </el-col>
      </el-row>
      <el-form-item label="region" prop="region">
        <el-radio v-model="form.region" label="sg">sg</el-radio>
        <el-radio v-model="form.region" label="tw">tw</el-radio>
        <el-radio v-model="form.region" label="ph">ph</el-radio>
        <el-radio v-model="form.region" label="vn">vn</el-radio>
        <el-radio v-model="form.region" label="id">id</el-radio>
        <el-radio v-model="form.region" label="my">my</el-radio>
        <el-radio v-model="form.region" label="th">th</el-radio>
        <el-radio v-model="form.region" label="br">br</el-radio>
        <el-radio v-model="form.region" label="co">co</el-radio>
        <el-radio v-model="form.region" label="cl">cl</el-radio>
        <el-radio v-model="form.region" label="mx">mx</el-radio>
      </el-form-item>
      <el-form-item label="env" prop="env">
        <el-radio v-model="form.env" label="test">test</el-radio>
        <el-radio v-model="form.env" label="uat">uat</el-radio>
        <el-radio v-model="form.env" label="staging">staging</el-radio>
      </el-form-item>
      <el-form-item label="total_payment" prop="total_payment">
        <el-input v-model="form.total_payment" placeholder="please write order total amount" style="width: 50%"></el-input>
      </el-form-item>
      <el-form-item label="pay_time" prop="pay_time">
        <el-input v-model="form.pay_time" placeholder="please write order pay_time，the default value is now" style="width: 50%"></el-input>
      </el-form-item>
      <el-form-item label="complete_time" prop="complete_time">
        <el-input v-model="form.complete_time" placeholder="please write order complete_time default value is now" style="width: 50%"></el-input>
      </el-form-item>
      <el-form-item style="margin-top: 20px" align="center">
        <el-button type="primary" @click="onSubmit('form')">Create Order Now</el-button>
      </el-form-item>
    </el-form>
    <div v-if="showResultCard" v-loading="isLoadingResult">
      <result-pane :resultReturn="resultReturn"></result-pane>
    </div>
    <br>
  </div>
  </el-tab-pane>
  <el-tab-pane label="other" name=second>
    <el-form>
      <el-form-item>
        <div>
          <json-editor v-model="datajson"></json-editor>
        </div>
      </el-form-item>
      <el-form-item align="center">
        <el-button type="primary" @click="onSubmitByJson(datajson)">Create Order Now</el-button>
      </el-form-item>
    </el-form>
    <div v-if="showResultCard" v-loading="isLoadingResult">
      <result-pane :resultReturn="resultReturn"></result-pane>
    </div>
  </el-tab-pane>
  </el-tabs>
</template>

<script>
  import ResultPane from './ResultPane'
  import JsonEditor from '../JsonEditor'
  import {api, postRequest} from "@/api/commit";
  export default {
    name: "AddPoint",
    data() {
      return {
        activeName: 'first',
        showItemCard: false,
        showResultCard: false,
        isLoadingResult: false,
        form: {
          buyername: '',
          buyerpassword: '',
          shopname: '',
          shoppassword:'',
          region: 'sg',
          env: 'test',
          total_payment:'',
          pay_time:"",
          complete_time:"",
        },
        datajson:{
          "shop_id":439512,
          "user_id":101314251,
          "country":"SG",
          "env": "staging",
          "order_status": 6,
          "total_payment": 100,
          "pay_time": 1635846003,
          "complete_time": 1635846004,
          "items": [
            {
            "item_id": 100314642,
            "model_id": 100314642,
            "quantity": 2,
            "item_status": 1,
            "item_price": 50,
            "global_attribute_values": [{
                    "attr_id": 1,
                    "attr_val_id": 2
            }],
            "local_cat_ids": [1,2,3],
            "global_cat_ids": [1,2,3],
            }
          ]
        },
        rules: {
          buyername: [
            {required: true, message: 'buyername不能为空', trigger: 'blur'}
          ],
          shopname: [
            {required: true, message: 'shopname不能为空', trigger: 'blur'}
          ],
          region: [
            {required: true, message: 'region不能为空', trigger: 'blur'}
          ],
          env: [
            {required: true, message: 'env不能为空', trigger: 'blur'}
          ],
          total_payment: [
            {required: true, message: 'total_payment不能为空', trigger: 'blur'}
          ]
        }
      }
    },
    components:{
      ResultPane,
      JsonEditor
    },
    methods: {
      onSubmit(form) {
        this.$refs[form].validate((valid) => {
          if (!valid) {
            this.$message({
              "message": "请检查表单！",
              "type": "warning"
            })
            return
          }
          this.resultReturn =''
          this.showResultCard = true
          this.isLoadingResult = true
         if (this.form.buyerpassword==''){
            delete this.form.buyerpassword
          }
          if (this.form.shoppassword==''){
            delete this.form.shoppassword
          }
          let params = Object.assign({}, this.form);
          params.total_payment = parseFloat(params.total_payment)
          params.pay_time = parseInt(params.pay_time)
          params.complete_time = parseInt(params.complete_time)
          postRequest(api['add_point_mock_order'], params).then((res)=>{
            this.resultReturn = res.resultReturn
            this.isLoadingResult = false
          },(error)=>{
            this.resultReturn = "请检查您的输入是不是有问题&依赖方报错俺也没办法"
            this.isLoadingResult = false
          })
        })
      },
      onSubmitByJson(data) {
          this.resultReturn =''
          this.showResultCard = true
          this.isLoadingResult = true
          let params
          if (typeof data === 'string'){
            params = JSON.parse(data)
          }else{
            params = data
          }
          postRequest(api['add_point_by_json'], params).then((res)=>{
            this.resultReturn = res.resultReturn
            this.isLoadingResult = false
          },(error)=>{
            this.resultReturn = "请检查您的输入是不是有问题&依赖方报错俺也没办法"
            this.isLoadingResult = false
          })
        }
      }
  }
</script>

<style scoped>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }

  .box-card {
    margin-bottom: 30px;
  }

  .form_item_no_label >>> .el-form-item__content {
    margin-left: 0px !important;
  }
</style>

